﻿<template>
    <div v-cloak class="flex-column">
        <component is="style" />
        <el-form :inline="true" :model="query" label-width="60px" size="small" class="margin-top-8 margin-left-4">
            <el-form-item label="状态">
                <el-select :popper-append-to-body="false" v-model="query.cilStatus" filterable placeholder="状态" size="small" style="width:150px">
                    <el-option label="请选择" :value="-1"></el-option>
                    <el-option v-for="item in selectData.dicStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开课时间" label-width="80px">
                <el-date-picker v-model="query.beginTime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" editable :clearable="false" style="width:150px"></el-date-picker>
                <span class="margin-lr-6">至</span>
                <el-date-picker v-model="query.endTime" type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" editable :clearable="false" style="width:150px"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button v-on:click="loadList" size="small" type="primary" icon="el-icon-search">查询</el-button>
                <el-button v-on:click="resetForm" size="small" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="flex-row">
            <div class="flex-row-fill padding-left-10">
                @*<el-button v-on:click="showImport=true" size="small" type="primary" icon="el-icon-upload2">导入</el-button>*@
                <el-button v-on:click="openEdit(null,0)" size="small" type="primary" icon="el-icon-circle-plus-outline">添加</el-button>
                @*<el-button icon="fa fa-file-excel-o" size="small" v-on:click="handleExport">导出</el-button>*@
            </div>
            <el-pagination background v-on:size-change="pagerSizeChange" v-on:current-change="pagerIndexChange" :current-page="query.pageIndex" :page-sizes="[20, 50, 100]"
                           :page-size="query.pageSize" layout="prev, pager, next, total, jumper, sizes" :total="query.rowCount"></el-pagination>
        </div>
        <div class="flex-column-fill">
            <div class="h100 hidden">
                <vxe-table :data="list" stripe border style="width:100%;" height="100%" size="mini" auto-resize :row-config="{isCurrent: true, isHover: true}" :column-config="{minWidth:'60px'}" :span-method="objectSpanMethod">
                    <vxe-column title="课程" align="center" width="280px" fixed="left" field="cilName">
                        <template #default="scope">
                            <div class="flex-row">
                                <div style="text-align: center;width: 3.8rem;">
                                    <el-image v-if="!!scope.row.cilCoverPath" :src="scope.row.cilCoverPath" :preview-src-list="[scope.row.cilCoverPath]" class="coverImg">
                                    </el-image>
                                    <i v-else class="el-icon-picture-outline" style="font-size: 30px; color: #909399;"></i>
                                </div>
                                <div style="text-align: left;">
                                    <span class="span">
                                        <el-tooltip effect="dark" :content="scope.row.cilIsShow?'学生、家长可查看该课程':'学生、家长不可查看该课程'" placement="top">
                                            <i v-on:click="handleEye(scope.rowIndex, scope.row)" :class="['fa',{ 'fa-eye color-green': scope.row.cilIsShow==1, 'fa-eye-slash color-gray' : scope.row.cilIsShow==0 }]"></i>
                                        </el-tooltip>
                                        <span class="margin-left-6">{{scope.row.cilName}}</span>
                                    </span>
                                    <br />
                                    <span class="color-gray">{{scope.row.cilRequire}}</span>
                                </div>
                            </div>
                        </template>
                    </vxe-column>
                    <vxe-column title="开课时间" align="center" width="170px" field="cilTime">
                        <template #default="scope">
                            <div class="text-center">
                                {{scope.row.cilStartTime}} 至 {{scope.row.cilFinishTime}}
                            </div>
                            <div>
                                <el-tag size="mini">{{scope.row.cilClassHour}}课时</el-tag>
                            </div>
                        </template>
                    </vxe-column>
                    <vxe-column title="上课时间" align="center" width="150px">
                        <template slot-scope="d">
                            <div>{{d.row.clrWeekStr}} {{d.row.cliStartTime}} {{!!d.row.cliStartTime?"~":""}} {{d.row.cliFinishTime}}</div>
                        </template>
                    </vxe-column>
                    <vxe-column title="上课地点" align="center" width="150px" field="liName"></vxe-column>
                    <vxe-column title="状态" align="center" width="90" field="cilStatus">
                        <template #header>
                            <i class="el-icon-info"> 状态</i>
                        </template>
                        <template #default="scope">
                            <div :class="['statusPanel',{ 'status_gray': scope.row.cilStatus==0, 'status_blue' : scope.row.cilStatus==1, 'status_orange' : scope.row.cilStatus==2}]">{{scope.row.cilStatus==0?'新增':scope.row.cilStatus==1?'已开课':scope.row.cilStatus==2?'已结课':'无效状态'}}</div>
                        </template>
                    </vxe-column>
                    <vxe-column title="操作" min-width="160" fixed="right" header-align="center" field="Edit">
                        <template #default="d">
                            <el-form :inline="true" label-width="60px" size="mini">
                                <el-form-item>
                                    <el-button plain size="mini" v-on:click="openEdit(d,5)">查看</el-button>
                                </el-form-item>
                                <template>
                                    <el-form-item v-if="d.row.cilStatus==0">
                                        <el-button type="primary" plain size="mini" v-on:click="openEdit(d,1)">编辑</el-button>
                                    </el-form-item>
                                    <el-form-item v-if="d.row.cilStatus==0">
                                        <el-button size="mini" type="danger" v-on:click="openEdit(d,2)">删除</el-button>
                                    </el-form-item>
                                    <el-form-item v-if="d.row.cilStatus==0">
                                        <el-button size="mini" type="warning" v-on:click="openEdit(d,3)">确认开课</el-button>
                                    </el-form-item>
                                    <el-form-item v-if="d.row.cilStatus==1">
                                        <el-button size="mini" type="primary" v-on:click="openEdit(d, 4)">结课</el-button>
                                    </el-form-item>
                                </template>

                            </el-form>

                        </template>
                    </vxe-column>
                </vxe-table>
            </div>
        </div>

        <el-drawer custom-class="el-drawer-fix" :visible="show" v-on:close="show=false" size="1000px" :destroy-on-close="true" :close-on-press-escape="false" :wrapperClosable="false">
            <template #title>
                <div>
                    @*//0 新增 1编辑 5查看 3编辑部分*@
                    {{form.optType==0?'新增课程':form.optType==1?'编辑课程':form.optType==5?'查看课程':'编辑课程'}}
                </div>
            </template>

            <div class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <template v-if="form.optType!=3">
                    <el-tabs v-model="activeName" class="padding-lr-15">
                        <el-tab-pane label="课程信息" name="0"></el-tab-pane>
                        <el-tab-pane label="课程简介" name="1"></el-tab-pane>
                    </el-tabs>
                    <div class="flex-column-fill hidden">
                        <el-scrollbar style="height:100%">
                            <el-form :model="form" ref="form" label-width="100px" class="h100 padding-lr-15" :rules="rules" :disabled="form.optType==5" size="small">
                                <template v-if="activeName==0">
                                    <el-form-item prop="cilCoverPath">
                                        <span slot="label">
                                            <el-tooltip effect="dark" content="建议长宽比 2 : 1" placement="right">
                                                <i class="el-icon-info"> 课程封面</i>
                                            </el-tooltip>
                                        </span>
                                        <el-upload class="avatar-uploader"
                                                   :show-file-list="false" accept=".jpg,.jpeg,.png,.JPG,.JGEG,.bmp"
                                                   :before-upload="beforeAvatarUpload" :disabled="!!form.cilCoverPath">

                                            <div class="imgMask" v-if="!!form.cilCoverPath">
                                                <el-image ref="previewImg" :src="form.cilCoverPath" fit="cover" class="avatar h100 w100 hidden" lazy :preview-src-list="[form.cilCoverPath]"></el-image>
                                                <div class="delete-img">
                                                    <div class="flex-row h100" style="align-items:center;">
                                                        <i class="el-icon-zoom-in flex-row-fill text-center" v-on:click.stop="previewPic"></i>
                                                        <i v-if="form.optType!=2" class="el-icon-delete flex-row-fill text-center" v-on:click.stop="delFile"></i>
                                                    </div>
                                                </div>
                                            </div>
                                            <i v-else-if="form.optType!=2" class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="课程名称" prop="cilName">
                                        <el-input v-model="form.cilName" placeholder="请输入，限16字以内" maxlength="16" show-word-limit></el-input>
                                    </el-form-item>
                                    <el-form-item label="课程代码" prop="cilRequire" :disabled="old.cliRequire">
                                        <el-input v-model="form.cilRequire" placeholder="请输入英文字符，限10字以内" maxlength="10" show-word-limit></el-input>
                                    </el-form-item>

                                    <el-form-item prop="lessonList">
                                        <template #label>
                                            课程节次
                                            @*<el-button v-if="form.optType!=2" type="text" title="添加上课地点" icon="el-icon-setting" v-on:click="openBasicData(2)">地点</el-button>
                                                <el-button v-if="form.optType!=2" type="text" title="添加上课时间" icon="el-icon-setting" v-on:click="openBasicData(1)">时间</el-button>*@
                                        </template>
                                        <el-table :data="form.lessonList" style="width:100%;" stripe>
                                            <el-table-column label="上课时间" align="center" width="200px">
                                                <template slot-scope="d">
                                                    <div class="flex-row yys-time-picker">
                                                        <el-time-picker v-model="d.row.cliStartTime" size="small" format="HH:mm" value-format="HH:mm" placeholder="开始" style="width:80px;" :clearable="false">
                                                        </el-time-picker>
                                                        <span class="margin-lr-10">至</span>
                                                        <el-time-picker v-model="d.row.cliFinishTime" size="small" format="HH:mm" value-format="HH:mm" placeholder="结束" style="width: 80px;" :clearable="false">
                                                        </el-time-picker>
                                                    </div>                                     
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="星期" align="center" width="420px">
                                                <template slot-scope="d">
                                                    <el-checkbox-group v-model="d.row.weekList" v-on:change="countClassHour">
                                                        <el-checkbox-button v-for="item in selectData.weekList" :label="item.id" :key="item.id">{{item.name}}</el-checkbox-button>
                                                    </el-checkbox-group>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="地点" align="center" min-width="150px">
                                                <template slot-scope="d">
                                                    <div class="flex-row">
                                                        <el-input v-model="d.row.liName" placeholder="请输入地点"></el-input>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作" align="center" width="100px" v-if="form.optType!=2">
                                                <template slot-scope="d">
                                                    <el-button v-if="d.$index==0" size="mini" type="primary" v-on:click="addLessonList">添加</el-button>
                                                    <el-button v-else size="mini" type="danger" v-on:click="deleteLessonList(d.$index,d.row)">删除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </el-form-item>

                                    <div class="flex-row" style="align-items:flex-start;">
                                        <el-form-item label="开课时间" prop="cilStartTime">
                                            <el-date-picker type="date" placeholder="选择开始时间" v-model="form.cilStartTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:150px;"></el-date-picker>
                                            <span style="margin: 0 .5rem;">至</span>
                                            <el-date-picker type="date" placeholder="选择结束时间" v-model="form.cilFinishTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:150px;"></el-date-picker>
                                        </el-form-item>
                                        <el-form-item label="课时" prop="cilClassHour" label-width="70px">
                                            <el-input-number v-model="form.cilClassHour" :min="0"></el-input-number>
                                        </el-form-item>
                                        <div class="flex-row-fill padding-left-10">
                                            <i class="el-icon-info" style="font-size: 14px;color: red !important;"> 排除节假日，预计课时{{predictcilClassHour}}（节）</i>
                                            <div style="font-size: 12px;color: #999;">默认根据课程节次和法定节假日自动计算课时，可手动更改</div>
                                        </div>
                                    </div>
                                </template>
                                <template v-else>
                                    <div v-if="form.optType==5">
                                        <js-media-detail :value="{mediaList:form.mediaList}" :show-title="false" empty-text="未添加课程简介"></js-media-detail>
                                    </div>
                                    <div v-else>
                                        <el-form-item label-width="0px" prop="summaryList">
                                            <js-media :value="form.mediaList" empty-text="请点击下方按钮添加课程简介" :fn="{audio:false,video:false,file:false,share:false,text: true,
                        image:true}"></js-media>
                                        </el-form-item>
                                    </div>

                                </template>
                            </el-form>
                        </el-scrollbar>
                    </div>
                    <div class="padding-10 border-top-solid border-greyLight" v-if="form.optType!=5">
                        <el-button-group size="small">
                            <el-button type="primary" size="small" v-on:click="submit" :loading="loading">{{loading?'保 存 中':'保 存'}}</el-button>

                            <el-button type="info" plain size="small" v-on:click="reset">重 置</el-button>
                            <el-button type="info" plain v-on:click="show=false" size="small">取 消</el-button>
                            @*<el-button type="info" size="small" icon="el-icon-view" v-on:click="reset">预 览</el-button>*@
                        </el-button-group>
                    </div>
                </template>
               
            </div>
        </el-drawer>
       
        <el-drawer custom-class="el-drawer-fix" :visible="showImport" v-on:close="showImport=false" size="85%" :destroy-on-close="true" :close-on-press-escape="false" :wrapperClosable="false">
            <template #title>
                <div>
                    导入课程
                </div>
            </template>
            <div class="flex-column hidden" style="position:absolute;top:0;bottom:0;left:0;right:0;">
                <course-import></course-import>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'scTeacherInfo',
            props: {
                id: {
                    type: Number,
                    'default': function () {
                        return 0;
                    }
                }
            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    list: [],
                    fn: {
                        edit: optor.canDo(402070501|402070502)
                    },
                    loading: false,
                    query: { cilStatus: -1, beginTime: '', endTime: '', pageIndex: 1, pageSize: 20, rowCount: 0 },
                    selectData: {
                        dicStatus: [{ label: '新增', value: 0 }, { label: '已开课', value: 1 }, { label: '已结课', value: 2 }],
                        weekList: [{ id: 1, name: '周一' }, { id: 2, name: '周二' }, { id: 3, name: '周三' }, { id: 4, name: '周四' }, { id: 5, name: '周五' }, { id: 6, name: '周六' }, { id: 7, name: '周日' }],//星期列表
                    },
                    activeName: '0',
                    predictcilClassHour: 0,//排除节假日，预计课时
                    form: {
                        cilId: 0,
                        cilCoverPath: null,
                        cilName: '',
                        cilRequire: '',
                        lessonList: [{ weekList:[], liId: 0, cliId: 0,liName:'' }],//节次列表（json字符串）"[{"week":1,"cliId":1,"liId":1}]"
                        cilStartTime: null,
                        cilFinishTime: null,
                        cilClassHour: 0,
                        mediaList:[]
                    },
                    show: false,
                    dialogShow: false,//预览模态框
                    endShow: false,//结课模态框
                    activeDialog:0,//预览标签栏
                    old: { form: '', cliRequire:'' },
                    rules: {
                        cilName: [
                            { required: true, message: '请输入课程名称', trigger: 'blur' },
                            { max: 16, message: '课程名称限16字以内', trigger: 'blur' }
                        ],
                        cilRequire: [
                            { required: true, message: '请输入课程代码', trigger: 'blur' },
                            {
                                validator: function (rule, value, callback) {
                                    if (!/^[A-Za-z]+$/.test(value)) callback(new Error('课程代码只能输入英文字符'));
                                    else callback();
                                }, trigger: 'blur'
                            }
                        ],
                        lessonList: [
                            {
                                required: true, validator: function (rule, value, callback) {
                                    var lessonList = _this.form.lessonList;
                                    for (var idx = 0; idx < lessonList.length; idx++) {
                                        var item = lessonList[idx];
                                        //验证配置的规则
                                        if (!item.cliStartTime || !item.cliFinishTime) return callback(new Error("第{0}项，请选择上课时间".formatStr(idx + 1)));
                                        if (_this.toSeconds(item.cliStartTime) > _this.toSeconds(item.cliFinishTime)) return callback(new Error('"第{0}项，上课时间开始时间不能大于结束时间'.formatStr(idx + 1)));
                                        if (item.weekList.length <= 0) return callback(new Error("第{0}项，请选择星期".formatStr(idx + 1)));
                                        if (!item.liName) return callback(new Error("第{0}项，请输入上课地点".formatStr(idx + 1)));
                                    };
                                    var arr = [];
                                    lessonList.map(function (t) {
                                        t.weekList.map(function (d) {
                                            arr.push({
                                                cliFinishTime: t.cliFinishTime,
                                                cliStartTime: t.cliStartTime,
                                                clrWeek: d,
                                                liName: t.liName,
                                                xKey: "周{0} {1}~{2} {3}".formatStr(_this.getWeekStr(d), t.cliStartTime, t.cliFinishTime, t.liName),
                                                xKeyTime: "周{0} {1}~{2}".formatStr(_this.getWeekStr(d), t.cliStartTime, t.cliFinishTime)
                                            });
                                        });
                                    });
                                    for (var idx = 0; idx < arr.length; idx++) {
                                        var ix = arr.findIndex(function (o, ox) {
                                            return ox != idx && arr[idx].xKey == o.xKey;
                                        });
                                        if (ix >= 0) return callback(new Error('时间+星期+地点重复 >> {0}'.formatStr(arr[ix].xKey)));
                                        var item = arr[idx];
                                        var a = new Date('1000/01/01 ' + item.cliStartTime + ':00');
                                        var b = new Date('1000/01/01 ' + item.cliFinishTime + ':00');
                                        var index = arr.findIndex(function (o, ox) {
                                            if (ox != idx && item.clrWeek == o.clrWeek && item.cliId != o.cliId) {
                                                var oa = new Date('1000/01/01 ' + o.cliStartTime + ':00');
                                                var ob = new Date('1000/01/01 ' + o.cliFinishTime + ':00');
                                                if ((a >= oa && a <= ob) || (b >= oa && b <= ob)) return true;
                                            }
                                            return false;
                                        });
                                        if (index >= 0) return callback(new Error('时间+星期交叉 >> {0} >> {1}'.formatStr(item.xKeyTime, arr[index].xKeyTime)));
                                    };
                                    callback();
                                }, trigger: 'change'
                            }],

                        cilStartTime: [
                            { required: true, message: '请选择开始时间', trigger: 'blur' },
                            {
                                validator: function (rule, value, callback) {
                                    if (!!value && !_this.form.cilFinishTime) {
                                        callback(new Error('请选择结束时间'));
                                    } else if (hxt.dateAdd('', 0, _this.form.cilFinishTime) < hxt.dateAdd('', 0, value)) {
                                        callback(new Error('开课结束时间不能小于开课开始时间'));
                                    } else {
                                        callback();
                                    }
                                }, trigger: 'blur'
                            }
                        ],
                        cilClassHour: [
                            { required: true, message: '请输入课时', trigger: 'blur' },
                            {
                                validator: function (rule, value, callback) {
                                    if (value < 1 && value > _this.predictcilClassHour) {
                                        callback(new Error('课时必须大于0且小于等于预计课时'));
                                    } else {
                                        callback();
                                    }
                                }, trigger: 'blur'
                            }
                        ]
                    },
                    showImport: false,//导入模态框
                };
            },
            computed: {

            },
            watch: {
                "query.beginTime": function (newVal, oldVal) {
                    var _this = this;
                    if (newVal && _this.query.endTime) {
                        if (hxt.dateAdd('', 0, newVal) > hxt.dateAdd('', 0, _this.query.endTime)) {
                            hxt.error('开课开始时间不能大于开课结束时间');
                            _this.query.beginTime = '';
                        }
                    }
                },
                "query.endTime": function (newVal, oldVal) {
                    var _this = this;
                    if (newVal && _this.query.beginTime) {
                        if (hxt.dateAdd('', 0, newVal) < hxt.dateAdd('', 0, _this.query.beginTime)) {
                            hxt.error('开课结束时间不能小于开课开始时间');
                            _this.query.endTime = '';
                        }
                    }
                },
                'form.cilStartTime': function (newVal, oldVal) {
                    var _this = this;
                    if (newVal) {
                        _this.countClassHour();
                    } else {
                        _this.predictcilClassHour = 0;
                    }
                },
                'form.cilFinishTime': function (newVal, oldVal) {
                    var _this = this;
                    if (newVal) {
                        _this.countClassHour();
                    } else {
                        _this.predictcilClassHour = 0;
                    }
                },
                'form.cilId': function (newVal, oldVal) {
                    var _this = this;
                    if (newVal) {
                        _this.countClassHour();
                    } else {
                        _this.predictcilClassHour = 0;
                    }
                },
                predictcilClassHour: function (newVal, oldVal) {
                    var _this = this;
                    if (_this.form.optType == 0) {
                        _this.form.cilClassHour = newVal;
                    }
                }
            },
            activated: function () {

            },
            mounted: function () {
                var _this = this;
                _this.resetForm();
                _this.loadList();
            },
            methods: {
                toSeconds: function (time) {//HH:mm 或者 HH:mm:ss
                    var bits = time.split(':');
                    if (bits.length == 2) return bits[0] * 3600 + bits[1] * 60;
                    if (bits.length == 3) return bits[0] * 3600 + bits[1] * 60 + bits[2] * 1;
                    return null;
                },
                pagerSizeChange: function (val) {
                    var _this = this;
                    _this.query.pageSize = val;
                    if (Math.ceil(_this.query.rowCount * 1.0000 / val) >= _this.query.pageIndex) _this.loadList();
                },
                pagerIndexChange: function (val) {
                    var _this = this;
                    _this.query.pageIndex = val;
                    _this.loadList();
                },
                loadList: function () {
                    var _this = this;
                    _this.list = [];
                    hxt.post({
                        url: hxt.config.link + 'pc/getCourseInfoList',
                        data: _this.query,
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('查询失败：' + res.errmsg);
                            _this.query.pageIndex = res.data.pageIndex;
                            _this.query.pageSize = res.data.pageSize;
                            _this.query.rowCount = res.data.rowCount;
                            $.each(res.data.list, function (idx, item) {
                                var o = { cilClassHour: item.cilClassHour, cilCoverPath: item.cilCoverPath, cilFinishTime: item.cilFinishTime, cilId: item.cilId, cilName: item.cilName, cilStartTime: item.cilStartTime, cilStatus: item.cilStatus, makeTime: item.makeTime, oiName: item.oiName, clrWeek: 0, clrWeekStr: "", cliName: "", cliStartTime: "", cliFinishTime: "", liName: "", allCount: item.clrList.length, clrList: item.clrList, cilRequire: item.cilRequire, mediaList: item.mediaList };
                                $.each(item.clrList, function (ix, m) {
                                    var o1 = $.extend({}, o, m);
                                    o1.allCount = ix == 0 ? item.clrList.length : 0;
                                    _this.list.push(o1);
                                    //if (m.cliList.length == 0) {
                                    //    o.allCount = ix == 0 ? item.allCount : 0;
                                    //    selectCourseByClassList.push(o1);
                                    //}
                                    //else {
                                    //    $.each(m.cliList, function (ii, im) {
                                    //        var o2 = $.extend({}, o1, im);
                                    //        o2.allCount = ix == 0 && ii == 0 ? item.allCount : 0;
                                    //        o2.cliCount = ii == 0 ? m.cliList.length : 0;
                                    //        selectCourseByClassList.push(o2);
                                    //    });
                                    //}
                                });
                            });
                        }
                    });
                },
                objectSpanMethod: function (obj) {
                    if (obj.column.property == 'cilName' || obj.column.property == 'cilTime' || obj.column.property == 'cilStatus' || obj.column.property == 'Edit') {
                        return { rowspan: obj.row.allCount, colspan: 1 };
                    } else if (obj.column.property == 'cilName' || obj.column.property == 'tiName') {
                        return { rowspan: obj.row.cliCount, colspan: 1 };
                    } else {
                        return { rowspan: 1, colspan: 1 };
                    };
                },
                handleExport: function () {//导出
                    var _this = this;
                    var _this = this, newData = [], data = [], merges = [], cols = [], newData = [], style = function () { }, fileName = "", border = {
                        top: { style: 'thin', color: { rgb: '808080' } },
                        bottom: { style: 'thin', color: { rgb: '808080' } },
                        left: { style: 'thin', color: { rgb: '808080' } },
                        right: { style: 'thin', color: { rgb: '808080' } }
                    };
                    fileName = "课程列表_";
                    cols = [{ wch: 20 }, { wch: 20 }, { wch: 12 }, { wch: 20 }, { wch: 20 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 21 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }];
                    style = function (idx, item) {
                        var num = idx.replace(/[^\d]/g, " ");
                        var col = idx.replace(/[^A-Za-z]/g, "").toUpperCase();
                        if (num <= 2) {
                            return {
                                font: {
                                    name: '宋体',
                                    sz: 10,
                                    bold: true
                                },
                                alignment: {
                                    vertical: 'center',
                                    horizontal: 'center',
                                    wrapText: true
                                },
                                border: border
                            };
                        } else {
                            return {
                                font: {
                                    name: 'Arial',
                                    sz: 10,
                                    bold: false,
                                    //color: col == 'E' && item.v < 0 ? { rgb: 'FF0500' } : { rgb: '000000' }
                                },
                                alignment: {
                                    vertical: 'center',
                                    horizontal: 'center',
                                    wrapText: true
                                },
                                border: border
                            }
                        }
                    };
                    data.push(["周期", "课程名称", "任课教师", "选课年级", "选课班级", "性别要求","计划人数", "开课人数", "报名人数", "上课日期", "课时", "上课时间", "", "", "课程收费", "收费项目", "", "", ""]);
                    data.push(["", "", "", "", "", "", "", "", "","", "","星期", "时间", "地点", "", "名称", "收费金额", "是否必交", "备注"]);
                    for (var i = 0; i < 11;i++) {
                        merges.push({ s: { r: 0, c: i }, e: { r: 1, c: i } });
                    };
                    merges.push({ s: { r: 0, c: 11 }, e: { r: 0, c: 13 } });
                    merges.push({ s: { r: 0, c: 15 }, e: { r: 0, c: 18 } });
                    merges.push({ s: { r: 0, c: 14 }, e: { r: 1, c: 14 } });
                    var count = 2;
                    $.each(_this.list, function (idx, item) {
                        var MergeRowCount = item.clrList.length > item.moneyList.length ? item.clrList.length : item.moneyList.length;
                        for (var i = 0; i < MergeRowCount; i++) {
                            var clr = !!item.clrList[i] ? item.clrList[i] : null;
                            var money = !!item.moneyList[i] ? item.moneyList[i] : null;
                            data.push([item.cpiName, item.cilName,
                                item.teacherList.map(function (x) { return x.uiName; }).join('、'), item.cilIsGrade && item.gradeList.length > 0 ? item.gradeList.map(function (x) { return x.giName; }).join('、') : "不限",
                                item.cilIsGrade && item.classList.length > 0 ? item.classList.map(function (x) { return x.ciName; }).join('、') : "不限",
                                item.cilSex == 0 ? '女' : item.cilSex == 1 ? '男' : '不限',
                                item.cilPlanNumber, item.cilStartClassNumber, item.cilActualNumber, item.cilStartTime + "至" + item.cilFinishTime,
                                item.cilClassHour,
                                !!clr ? clr.clrWeekStr : "", !!clr ? (clr.cliStartTime + '-' + clr.cliFinishTime) : "", !!clr ? clr.liName : "",
                                item.cilIsNeedPay == 0 ? "免费" : "收费", !!money ? money.cmrName : "", !!money ? money.cmrPrice : "", !!money ? (money.cmrIsMust == 0 ? '否' : '是') : "", !!money ? money.cmrRemark : ""
                            ]);
                        };
                        for (var i = 0; i < 11; i++) {
                            merges.push({ s: { r: count, c: i }, e: { r: count+MergeRowCount-1, c: i } });
                        };
                        merges.push({ s: { r: count, c: 14 }, e: { r: count + MergeRowCount - 1, c: 14 } });
                        count += MergeRowCount;
                    });
                    if (!fileName) return hxt.error('导出配置有误');
                    hxt.exportExcel({
                        fileName: fileName + hxt.dateFormat('yyyyMMdd') + ".xlsx",
                        data: data,
                        cols: cols,
                        merges: merges,//合并单元格 [{s: { r: 开始行, c: 开始列 }, e: { r: 结束行, c: 结束列 }}]
                        style: style
                    });
                },
                resetForm: function () {//查询条件重置
                    var _this = this;
                    _this.query.cpiId = 0;
                    _this.query.tiId = 0;
                    _this.query.cilIsNeedPay = -1;
                    _this.query.cilStatus = -1;
                    _this.query.numFlag = -1;
                    _this.query.beginTime = '';
                    _this.query.endTime = '';
                },
                openEdit: function (g, flag) {//0 新增 1编辑 5查看 2删除 3确认开课 4结课
                    var _this = this;
                    _this.old.cliRequire = "";
                    //_this.activeName = '0';
                    //flag = ((flag == 1 && g.row.cilStatus > 0) ? 3 : flag);
                    if (!g) {
                        _this.form.cilCoverPath = null;
                        _this.form.cilName = "";
                        _this.form.cilRequire = "";
                        _this.form.cilStartTime = "";
                        _this.form.cilFinishTime = "";
                        _this.form.cilClassHour = 0
                        _this.form.lessonList = [{ weekList: [], liId: 0, cliId: 0, liName: '', cliStartTime: '', cliFinishTime: '' }];
                        _this.form.mediaList = [];
                        _this.form.optType = 0;
                        _this.show = true;
                        return;
                    };
                    if (flag == 1 || flag == 5) {
                        var rd = g.row;
                        rd.lessonList = [];
                        $.each(rd.clrList, function (idx, item) {
                            var g = rd.lessonList.find(function (o) {
                                return o.cliStartTime == item.cliStartTime && o.cliFinishTime == item.cliFinishTime && o.liName == item.liName;
                            });
                            if (!g) {
                                g = {
                                    liName: item.liName,
                                    cliStartTime: item.cliStartTime,
                                    cliFinishTime: item.cliFinishTime,
                                    weekList: [item.clrWeek]
                                };
                                rd.lessonList.push(g);
                            } else {
                                g.weekList.push(item.clrWeek);
                            };
                        });

                        _this.form = rd;
                        _this.form.optType = flag;
                        _this.old.form = JSON.stringify(_this.form);
                        _this.old.cliRequire = rd.cliRequire;
                        _this.show = true;
                        return;
                    };
                    if (flag == 2 || flag == 3 || flag == 4) {//删除
                        hxt.confirm('确定要' + (flag == 2 ? '删除' : flag == 3 ? '开课' : '结课')+'吗？', function () {
                            hxt.post({
                                url: hxt.config.link + "pc/courseInfoSave",
                                data: {
                                    cilId: g.row.cilId,
                                    optType: flag
                                },
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error((flag == 2 ? '删除' : flag == 3 ? '开课' : '结课')+'失败：' + res.errmsg);
                                    hxt.success((flag == 2 ? '删除' : flag == 3 ? '开课' : '结课') + '成功');
                                    _this.loadList();
                                    //if (flag == 2) {
                                    //    _this.list.splice(g.rowIndex, 1);
                                    //}
                                    //else {
                                    //    g.row.cilStatus = res.data.cilStatus;
                                    //}
                                }
                            });
                        });
                        return;
                    };
                },
                getLessonList: function () {// 获取每周节次列表（json字符串）"[{"week":3,"cliId":24,"liId":0,"liName":""}]"
                    var _this = this;
                    var lessonList = [];
                    $.each(_this.form.lessonList, function (idx, item) {
                        $.each(item.weekList, function (ix, it) {
                            var obj = { week: it, liName: item.liName, cliStartTime: item.cliStartTime, cliFinishTime: item.cliFinishTime };
                            lessonList.push(obj);
                        });
                    });
                    return lessonList;
                },
                getWeekStr: function (week) {//转换显示的星期
                    var dic = { 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六', 7: '日' };
                    if (week > 0) return dic[week];
                },
                getDateDiff: function (sDate, eDate) { //sDate和eDate是yyyy-MM-dd格式
                    var date1 = new Date(sDate);
                    var date2 = new Date(eDate);
                    var date3 = date2.getTime() - date1.getTime();
                    var days = Math.floor(date3 / (24 * 3600 * 1000));
                    return days;
                },
                countClassHour: function () { // 动态计算课时
                    var _this = this;
                    var lessonList = _this.getLessonList();
                    if (lessonList.length == 0 || _this.form.cilStartTime == "" || _this.form.cilFinishTime == "") return _this.predictcilClassHour = 0;
                    var weekCount = [0, 0, 0, 0, 0, 0, 0]; //每周每天节次
                    var wCount = lessonList.length; //每周总计节次
                    $.each(lessonList, function (idx, item) {
                        //console.log(item);
                        var index = item.week - 1;
                        var count = weekCount[index];
                        count++;
                        /*console.log(count);*/
                        weekCount.splice(index, 1, count)
                    });
                    //console.log(weekCount);

                    var hl = [];
                    var cS = null,
                        cE = null;
                    // 取头
                    for (var week = 0; week < 7; week++) {
                        var dt = hxt.dateAdd("d", week, _this.form.cilStartTime);
                        var w = dt.getDay()
                        hl.push(!w ? 7 : w);
                        if (!w) {
                            cS = dt;
                            //console.log(web.formatDateTime(undefined, dt));
                            break;
                        }
                    }
                    //console.log(hl);
                    // 取尾
                    for (var week = 0; week < 7; week++) {
                        var dt = hxt.dateAdd("d", -week, _this.form.cilFinishTime);
                        var w = dt.getDay();
                        hl.push(!w ? 7 : w);
                        if (!w) {
                            cE = dt;
                            //console.log(web.formatDateTime(undefined, dt));
                            break;
                        }
                    }
                    //console.log(hl);

                    var cCount = _this.getDateDiff(cS, cE);
                    //console.log(cCount);

                    var classHour = 0;
                    $.each(hl, function (idx, item) {
                        classHour = (classHour + weekCount[item - 1]);
                    });
                    _this.predictcilClassHour = cCount / 7 * wCount + classHour;

                    //排除节假日
                    var excludeHolidayCount = 0; //排除课时总数
                    var sumDays = _this.getDateDiff(_this.form.cilStartTime, _this.form.cilFinishTime); //共几天
                    for (var addDay = 0; addDay <= sumDays; addDay++) {
                        var addDt = hxt.dateAdd("d", addDay, _this.form.cilStartTime); //后一天
                        var addWeek = addDt.getDay(); //获取星期
                        addWeek = addWeek == 0 ? 7 : addWeek;
                        $.each(_this.selectData.holidayList, function (idx, item) {
                            if (hxt.formatDateTime('yyyy/MM/dd', addDt) == hxt.formatDateTime('yyyy/MM/dd', item.hiDate)) {
                                //如果遍历节假日时间和开课时间范围内有相同时间，减去对应星期的课时
                                var index = addWeek - 1;
                                excludeHolidayCount += weekCount[index];
                            }
                        });
                    }
                    _this.predictcilClassHour -= excludeHolidayCount;
                },
                reset: function () {//表单重置
                    var _this = this;
                    if (_this.form.optType == 1) {
                        _this.form = JSON.parse(_this.old.form);
                    } else {
                        _this.$refs.form.resetFields();
                        _this.form.cilFinishTime = '';
                        _this.form.lessonList = [{ weekList: [], liName: '', cliStartTime: '', cliFinishTime: '' }];
                        _this.fileList = [];
                    }
                },
                addLessonList: function () {//添加课程节次
                    var _this = this;
                    _this.form.lessonList.push({ weekList: [], liName: '', cliStartTime: '', cliFinishTime:'' });
                },
                deleteLessonList: function (rowIndex, row) {
                    var _this = this;
                    _this.form.lessonList.splice(rowIndex, 1);
                    _this.$refs.form.validateField("lessonList");
                },
                beforeAvatarUpload: function (file) {//图片选择完毕
                    var _this = this;
                    const isJPG = (file.type === 'image/jpeg' || file.type === 'image/jpg'
                        || file.type === 'image/png' || file.type === 'image/bmp');
                    const isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isJPG) {
                        return hxt.error('上传头像图片只能是PNG、JPG、JGEG、BMP格式');
                    }
                    if (!isLt2M) {
                        return hxt.error('上传头像图片大小不能超过2MB');
                    }
                    if (!FileReader) {
                        return hxt.error('当前浏览器不支持上传图片');
                    };
                    hxt.compressImg(file, 800, function (id, raw64, base64) {
                        _this.form.cilCoverPath = base64;
                    });
                },
                previewPic: function () {//预览图片
                    this.$refs.previewImg.showViewer = true;
                },
                delFile: function () {//删除图片
                    var _this = this;
                    _this.form.cilCoverPath = '';
                },
                tabClick: function (e) {//调转到课程/简介
                    var _this = this;
                    var scrollbar = this.$refs.scrollbar;
                    if (e.index == 1) {
                        //简介
                        var div = _this.$refs.mediaList;
                        scrollbar.wrap.scrollTop=(div.offsetTop);
                        return;
                    };
                    var div = _this.$refs.cilCoverPath||_this.$refs.course;
                    scrollbar.wrap.scrollTop=(div.offsetTop);
                },
                submit: function () {
                    var _this = this;
                    hxt.validateElForm(_this, 'form', function () {
                        if (_this.old.form == JSON.stringify(_this.form)) return hxt.msg('信息未更改');
                        hxt.confirm("保存课程?", function () {
                            var saveToServer = function () {
                                hxt.unmask();
                                var data = JSON.parse(JSON.stringify(_this.form));
                                _this.loading = true;
                                data.lessonList = JSON.stringify(_this.getLessonList(_this.form.lessonList));//节次列表
                                data.summaryList = encodeURIComponent(JSON.stringify(_this.form.mediaList.map(function (item, index) {
                                    return {
                                        miId: item.miId,
                                        miDuration: item.miDuration,
                                        miIndex: index,
                                        miSize: item.miSize,
                                        miTitle: item.miTitle,
                                        miType: item.miType,
                                        miUrl: item.miUrl
                                    }
                                })));//课程简介（json字符串）
                                hxt.post({
                                    url: hxt.config.link + "pc/courseInfoSave",
                                    data: data,
                                    ok: function (res) {
                                        _this.loading = false;
                                        if (res.code != 0) return hxt.error('保存失败：' + res.errmsg);
                                        hxt.success('保存成功');
                                        _this.loadList();
                                        _this.show = false;
                                    }
                                });
                            };

                            var upload = function () {

                                console.log(_this.form)
                                var row = _this.form.mediaList.find(function (item) {
                                    var url = ('' + item.miUrl).toLowerCase();
                                    return item.miType != 1 && item.miType != 5 && !url.startsWith('http://') && !url.startsWith('https://');
                                });
                                var url = !!_this.form.cilCoverPath ? ('' + _this.form.cilCoverPath).toLowerCase() : '';
                                var avatar = !!url && !url.startsWith('http://') && !url.startsWith('https://');
                                if (!!row) {
                                    hxt.uploadFile({
                                        signUrl: hxt.config.link + 'pc/v3OssToken',
                                        base64: row.miType == 2 ? row.miUrl : null,
                                        file: row.miType != 2 ? row.miUrl : null,
                                        compress: false,
                                        folder: _this.optor.bucketName + '/course/' + _this.form.cilRequire,
                                        success: function (res) {
                                            row.miUrl = res.url;
                                            upload();
                                        },
                                        fail: function (err) {
                                            hxt.unmask();
                                            hxt.error('上传文件失败：' + err);
                                        }
                                    });
                                } else if (!!avatar) {
                                    hxt.uploadFile({
                                        signUrl: hxt.config.link + 'pc/v3OssToken',
                                        base64: _this.form.cilCoverPath,
                                        file: null,
                                        compress: false,
                                        folder: _this.optor.bucketName + '/course/' + _this.form.cilRequire + '/cover',
                                        success: function (res) {
                                            _this.form.cilCoverPath = res.url;
                                            upload();
                                        },
                                        fail: function (err) {
                                            hxt.unmask();
                                            hxt.error('课程封面上传失败：' + err);
                                        }
                                    });
                                }
                                else {
                                    saveToServer();
                                }
                            };
                            hxt.mask();
                            upload();
                        });
                    });
                },
            },
            components: {
                jsMedia: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/pc/My/Component/pc.media.cshtml"))); },
                jsMediaDetail: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/pc/My/Component/pc.media.detail.cshtml"))); },
                courseImport: function () { return hxt.staticComponent(@Html.Raw(this.vueComponent("~/Views/course/Import.cshtml"))); }
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .avatar-uploader {
        line-height: initial;
    }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    .imgMask {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .delete-img {
        display: none;
    }

    .imgMask:hover .delete-img {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        bottom: 0px;
        background: rgba(59, 60, 61, 0.5);
        z-index: 999;
        cursor: pointer;
        text-align: right;
    }

        .imgMask:hover .delete-img i {
            display: block;
            font-size: 24px;
            color: white;
        }

    .cl-select .el-select-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

        .cl-select .el-select-group .el-select-dropdown__item {
            width: 20%;
            font-size: 13px;
            word-break: break-word;
            white-space: normal;
            height: auto;
            line-height: 24px;
            margin-bottom: 4px;
        }

    .coverImg {
        width: 50px;
        height: 50px;
        cursor: pointer;
        overflow: hidden;
        border: 1px solid #5FB878;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .statusPanel {
        height: 50px;
        width: 50px;
        border-radius: 25px;
        user-select: none;
        border: 2px dotted #009688;
        line-height: 50px;
        text-align: center;
        box-sizing: border-box;
        margin: 0 auto;
        display: inline-block;
        transform: rotate(30deg);
        -ms-transform: rotate(30deg); /* IE 9 */
        -moz-transform: rotate(30deg); /* Firefox */
        -webkit-transform: rotate(30deg); /* Safari 和 Chrome */
        -o-transform: rotate(30deg); /* Opera */
        font-size: .6rem;
        color: #009688;
    }

    .status_gray {
        color: #888;
        border-color: #888;
    }

    .status_jacinth {
        color: #FF5722;
        border-color: #FF5722;
    }

    .status_orange {
        color: #FFB800;
        border-color: #FFB800;
    }

    .status_deep {
        color: #393D49;
        border-color: #393D49;
    }

    .status_blue {
        color: #1E9FFF;
        border-color: #1E9FFF;
    }

    .el-dialog-flex .el-dialog .el-dialog__body {
        padding: 0;
    }

    .box-card {
        box-shadow: 0 0.15rem 1.25rem 0.05rem rgba(22, 127, 136, .12);
        padding: 5px 15px;
    }
    .yys-time-picker input{
        padding-right:0 !important;
    }
</style>